<template>
    <div class="endRunnerContainer">
        <!--头部面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>测试执行</el-breadcrumb-item>
            <el-breadcrumb-item>执行终端</el-breadcrumb-item>
        </el-breadcrumb>

        <!--查询卡片-->
        <el-card class="box-card ">
            <el-form ref="queryFormRef" :inline="true" :model="queryEndRunnerForm" class="queryTestplanForm">
                <el-form-item label="IP" prop="ip">
                    <el-input v-model="queryEndRunnerForm.ip" placeholder="输入EndRunnerIP" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getOnlineEndRunnerList()">查询</el-button>
                    <el-button type="info" icon="el-icon-search" @click="resetQueryForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!--表格-->
        <el-card class="box-card">
            <el-table
                    :data="endRunnerList"
                    border
                    style="width: 100%"
                    :header-cell-style="headerCellstyle"
                    stripe>


                <el-table-column
                        type="index"
                        label="序号"
                        width="60px">
                </el-table-column>

                <el-table-column
                        prop="ip"
                        label="IP">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="130">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle
                                   @click="editTestcase(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle
                                   @click="deleteATestcase(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页 暂时先不看-->
        <el-pagination


                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "EndRunner",
        created() {
            this.getOnlineEndRunnerList();
        },
        data(){
            return{
                queryEndRunnerForm:{},
                endRunnerList:{},
                /*表头样式*/
                headerCellstyle:{'background-color':'#f5f7fa'},
            }
        },
        methods:{
            /*查询在线的endrunnerList*/
            async getOnlineEndRunnerList(){
                const {data:res} = await this.$http.get("endRunner/getAllOnlineEndRunners");
                if(res.status !== 200) return this.$message.error("查询执行终端失败！")
                this.endRunnerList = res.data;
            },
            /*重置查询表单*/
            resetQueryForm(){
                this.$refs.queryFormRef.resetFields();
            }

        }
    }
</script>

<style scoped>
    .el-card {
        margin-bottom: 20px;
    }
</style>